<template>
  <div>
    <h2>计算属性</h2>
    <p>{{ addName }}</p>
    <p>{{ addName }}</p>
    <p>{{ addName }}</p>

    <h2>用methods方法</h2>
    <p>{{ add2Name() }}</p>
    <p>{{ add2Name() }}</p>
    <p>{{ add2Name() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "张",
      ming: "三",
    };
  },
  computed: {
    // computed中的每个方法，都是一个计算属性
    // 这里得写方法（按照函数的格式写），使用它的位置必须将其视为属性使用
    // 这个方法，必须返回一个值
    addName() {
      console.log("调用了计算属性");
      return this.xing + this.ming;
    },
  },
  methods: {
    add2Name() {
      console.log("调用了方法");
      return this.xing + this.ming;
    },
  },
};
</script>

<style >
h2 {
  color: skyblue;
}
</style>